<template>
  <PageHeader :title="t('trade.订单变化趋势')" class="border-bottom p10">
    <template #right>
      <DatePick @change="getDataList" />
    </template>
  </PageHeader>
  <div id="chart2" class="chart_box"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import DatePick from "@/components/datePick.vue";
import Api from "@/config/api/api";
import initChart from "@/utils/chart";

const { t } = useI18n();

const loading = ref(false);
const chart2 = null;

const getDataList = (date, type) => {
  loading.value = true;
  const params = {
    startDate: date[0],
    endDate: date[1],
    type: type,
  };
  Api.saleTrend(params)
    .then((res) => {
      initChart(
        "chart2",
        chart2,
        [
          {
            name: t('trade.支付订单数'),
            data: res.data?.map((v) => v.saleCount),
            rgb: "33,195,188",
          },
          {
            name: t('trade.下单数'),
            data: res.data?.map((v) => v.saleCreateCount),
            rgb: "30,135,240",
          },
        ],
        res.data?.map((v) => v.time)
      );
    })
    .finally(() => {
      loading.value = false;
    });
};
</script>
<style lang="scss" scoped>
.card2 {
  background-color: #fff;
  border-radius: 2px;
  width: calc((100% - 10px) / 2);
  .chart_box {
    height: 458px;
    margin-top: 30px;
  }
}
</style>
